<template>
    <div class="contents">
        <div class="img">
            <img src="@/assets/images/haibao-bg.png" alt="">
        </div>
        <div class="lyric">
            <div class="title">
                鱼说： 一起思考一起成长
            </div>
            <div class="other">
                管理的技巧
            </div>
        </div>
        <div class="range">
            <mt-range
                v-model="rangeValue"
                :min="0"
                :max="howlong"
                :step="1"
                :bar-height="1">
            </mt-range>
            <div class="now">
                0:30
            </div>
            <div class="all">
                9:00
            </div>
        </div>
        <div class="opration">
            <div class="left">
                <img src="@/assets/images/15-pre.png" alt="">
            </div>
            <div class="center">
                <img src="@/assets/images/audio-pause.png" alt="">
            </div>
            <div class="right">
                <img src="@/assets/images/15-next.png" alt="">
            </div>
        </div>
        <div class="oprationagain">
            <div class="wengao">
                <div class="img">
                    <img src="@/assets/images/order-icon.png" alt="">
                </div>
                <span>
                    文稿
                </span>
            </div>
            <div class="zan" @click='zan' :class="{'zaned': zaned}">
                <div class="img">
                </div>
                <span>
                    833
                </span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            rangeValue: 20,
            howlong: 100,
            zaned: false
        }
    },
    methods: {
        zan(){
            this.zaned = true
        }
    }
}
</script>
<style lang="scss" scoped>
.contents{
    // overflow: hidden;
    .img{
        width: 3rem;
        height: 3.9rem;
        margin: 1.5rem auto .85rem;
        img{
            width: 100%;
            height:100%;
        }
    }
    .lyric  .title{
        text-align: center;
        font-size: 0.32rem;
        margin-bottom: .32rem;
    }
    .lyric .other{
        text-align: center;
        font-size: 0.28rem;
        margin-bottom: .32rem;
        color: #929292;
    }
    .range{
        position: relative;
        padding-bottom:0.1rem;
        margin: 0 0.3rem;
        .now{
            position: absolute;
            top: 0.4rem;
            left: 0;
            color: #b1b1b1;
        }
        .all{
            position: absolute;
            top: 0.4rem;
            right: 0.3rem;
            color: #b1b1b1;
        }
    }
    .opration{
        height: 2.4rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-bottom: .01rem solid #ccc;
        .left{
            width: .42rem;
            height: .42rem;
            margin-left: 1.7rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .center{
            width: 1.2rem;
            height: 1.2rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .right{
            float: left;
            width: .42rem;
            height: .42rem;
            margin-right: 1.7rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .oprationagain{
        height: 1.12rem;
        margin-bottom: 1rem;
        border-bottom: .01rem solid #ccc;
        .wengao{
            float: left;
            margin-left: 1.7rem;
            .img{
                width: 0.32rem;
                height: 0.32rem;
                margin: 0.2rem;
                img{
                    width: 100%;
                    height: 100%;
                }  
            }
            span{
                font-size: 0.24rem;
                display: block;
                text-align: center;
            }
        }
        .zan{
            float: right;
            margin-right: 1.7rem;
            .img{
                width: 0.32rem;
                height: 0.32rem;
                margin: 0.2rem;
                background: url('../../assets/images/thumb-icon.png') no-repeat;
                background-size: 100% 100%;
            }
            span{
                font-size: 0.24rem;
                display: block;
                text-align: center;
            }
        }
        .zaned{
            .img{
                background: url('../../assets/images/zan.png') no-repeat;
                background-size: 100% 100%;
            }
        }
    }
}
</style>

